<template>
  <div class="traceability-data">
    <div class="header-title">
      <dv-decoration-3 style="width:100px;height:20px;" />
      <div class="title-text">霜选农品溯源</div>
      <dv-decoration-3 style="width:100px;height:20px;" />
    </div>
    <div class="data-grid">
      <div class="data-item" v-for="(item, index) in dataList" :key="index">
        <div class="item-icon">
          <i :class="item.icon"></i>
        </div>
        <div class="item-label">{{ item.label }}</div>
        <div class="item-value">
          {{ item.value }}
          <span class="unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { get } from '@/utils/request'
import router from '@/router'

const dataList = ref([
  { label: '土壤PH值', value: '0', unit: 'PH', icon: 'icon-ph' },
  { label: '土壤温度', value: '0', unit: '°C', icon: 'icon-temperature' },
  { label: '土壤含水率', value: '71.4', unit: '%RH', icon: 'icon-humidity' },
  { label: '土壤含氮量', value: '0', unit: 'mg/kg', icon: 'icon-nitrogen' },
  { label: '土壤含磷量', value: '0', unit: 'mg/kg', icon: 'icon-phosphorus' },
  { label: '土壤含钾量', value: '0', unit: 'mg/kg', icon: 'icon-potassium' },
  { label: '土壤电导率', value: '1.6', unit: 'us/cm', icon: 'icon-conductivity' },
  { label: '空气温度', value: '0', unit: '°C', icon: 'icon-air-temp' },
  { label: '相对湿度', value: '0', unit: '%RH', icon: 'icon-relative-humidity' }
])

// 获取最新数据
const fetchLatestData = async () => {
  try {
    // 确保有token
    const token = localStorage.getItem('token')
    if (!token) {
      console.log('No token available, skipping request')
      return
    }

    // 获取土壤质量综合数据
    const soilQualityResponse = await get('/soil/current')
    const atResponse = await get('/at/current')    // 空气温度
    const ahResponse = await get('/ah/current')    // 空气湿度
    
    console.log('Soil quality response:', soilQualityResponse) // 调试日志

    // 更新数据列表
    dataList.value = [
      { 
        label: '土壤PH值', 
        value: soilQualityResponse?.ph || '0', 
        unit: 'PH', 
        icon: 'icon-ph'
      },
      { 
        label: '土壤温度', 
        value: soilQualityResponse?.temperature || '0', // 假设后端返回的字段名是temperature
        unit: '°C', 
        icon: 'icon-temperature' 
      },
      { 
        label: '土壤含水率', 
        value: '71.4', 
        unit: '%RH', 
        icon: 'icon-humidity' 
      },
      { 
        label: '土壤含氮量', 
        value: soilQualityResponse?.nitrogen || '0', 
        unit: 'mg/kg', 
        icon: 'icon-nitrogen'
      },
      { 
        label: '土壤含磷量', 
        value: soilQualityResponse?.phosphorus || '0', 
        unit: 'mg/kg', 
        icon: 'icon-phosphorus'
      },
      { 
        label: '土壤含钾量', 
        value: soilQualityResponse?.potassium || '0', 
        unit: 'mg/kg', 
        icon: 'icon-potassium'
      },
      { 
        label: '土壤电导率', 
        value: '1.6', 
        unit: 'us/cm', 
        icon: 'icon-conductivity' 
      },
      { 
        label: '空气温度', 
        value: atResponse?.value || '0', 
        unit: '°C', 
        icon: 'icon-air-temp' 
      },
      { 
        label: '相对湿度', 
        value: ahResponse?.value || '0', 
        unit: '%RH', 
        icon: 'icon-relative-humidity' 
      }
    ]

  } catch (error) {
    if (error.response?.status === 401) {
      router.push('/login')
    } else {
      console.error('Failed to fetch data:', error)
    }
  }
}

// 定时刷新数据
let refreshTimer = null

onMounted(() => {
  // 延迟执行第一次数据获取
  setTimeout(fetchLatestData, 500)
  // 设置定时刷新，每5分钟更新一次数据
  refreshTimer = setInterval(fetchLatestData, 300000)
})

onBeforeUnmount(() => {
  clearInterval(refreshTimer)
})
</script>

<style lang="scss" scoped>
.traceability-data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;

    .title-text {
      font-size: 14px;
      color: #03d3ec;
      white-space: nowrap;
      margin: 0 10px;
    }
  }

  .data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;

    .data-item {
      background: rgba(3, 211, 236, 0.1);
      border-radius: 4px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #03d3ec, transparent);
      }

      .item-icon {
        color: #03d3ec;
        font-size: 20px;
        margin-bottom: 5px;
      }

      .item-label {
        color: #ffffff;
        font-size: 12px;
        margin-bottom: 5px;
      }

      .item-value {
        color: #00ff00;
        font-size: 16px;
        font-weight: bold;

        .unit {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
          margin-left: 2px;
        }
      }
    }
  }
}
</style> 